<template>
  <div class="mask-container" v-if="userEditor['EditorComponents'][userEditor.current]">
    <div class="mask">
      <div class="mark-header">{{ userEditor.maskTitle }}</div>
      <div class="closeMask" @click="handleClose">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>

      <MyEditor
        :ref="editorRef"
        v-model:content="content"
        @setEditorValue="(val) => (content = val)"
      />

      <!-- <div style="border: 1px solid #ccc; margin-top: 10px">
        <WeToolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />

        <WeEditor
          style="height: 300px; overflow-y: hidden"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
          @onChange="handleChange"
          @onDestroyed="handleDestroyed"
          @onFocus="handleFocus"
          @onBlur="handleBlur"
          @customAlert="customAlert"
          @customPaste="customPaste"
        />
      </div> -->
      <div class="footer">
        <div class="submitContent" @click="handleSubmit">发 布</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import MyEditor from "../myEditor.vue";
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { userEditorStore } from "@/stores/editor.js";
const userEditor = userEditorStore();

const editorRef = ref(null)
const content = ref('')

// //提交数据
const handleSubmit = () => {
  if (content.value.length > 0) {
    userEditor.handleCommSaveAricle(content.value, userEditor.current);
    content.value = "";
  }
};

const handleClose = () => {
  userEditor.updateEditor(false);
};

const mode = "default";

const isClient = ref(false);
if (process.client) {
  isClient.value = true;
}

// 编辑器实例，必须用 shallowRef
// const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p></p>");

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {}, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入文章内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const handleChange = (editor) => {
  console.log("change:", editor.getHtml());
};

const handleDestroyed = (editor) => {
  console.log("destroyed", editor);
};

const handleFocus = (editor) => {
  console.log("focus", editor);
};

const handleBlur = (editor) => {
  console.log("blur", editor);
};
const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
  console.log("ClipboardEvent 粘贴事件对象", event);
  // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
  // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
  // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

  // 自定义插入内容
  editor.insertText("xxx");

  // 返回 false ，阻止默认粘贴行为
  event.preventDefault();
  callback(false); // 返回值（注意，vue 事件的返回值，不能用 return）

  // 返回 true ，继续默认的粘贴行为
  // callback(true)
};
</script>

<style scoped lang="scss">
.mask-container {
  position: fixed;
  width: 100%;
  bottom: 0px;
  height: 100%;
  z-index: 222;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.1);
}
.mask {
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
  position: relative;
  z-index: 22;
  top: 50%;
  left: 50%;
  width: 1000px;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 4px 4px rgba($color: #000000, $alpha: 0.1);

  .mark-header {
    height: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 20px;
  }

  .closeMask {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 24px;
    cursor: pointer;
  }
}
.tips {
  font-size: 12px;
  color: #999;
  font-weight: 400;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  .submitContent {
    padding: 5px 20px;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    // color:red;
    background-color: #126983;
    color: #fff;
  }
}
</style>
